<template>
	<view class="monitor-page">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-content">
				<view class="page-title">
					<text class="title-text">监控中心</text>
					<text class="subtitle-text">实时数据监控与分析</text>
				</view>
			</view>
		</view>
		
		<!-- 权限提示内容 -->
		<view class="content-container">
			<view class="permission-notice">
				<view class="notice-icon">
					<text class="icon-large">🔒</text>
				</view>
				<text class="notice-title">访问受限</text>
				<text class="notice-desc">您当前没有权限访问监控中心功能</text>
				<text class="notice-detail">如需访问，请联系系统管理员申请相应权限</text>
				
				<view class="notice-actions">
					<view class="action-btn primary-btn" @click="goBack">
						<text class="btn-text">返回首页</text>
					</view>
				</view>
			</view>
			
			<!-- 功能预览 -->
			<view class="feature-preview">
				<view class="preview-title">
					<text class="title-text">功能概览</text>
				</view>
				
				<view class="feature-grid">
					<view class="feature-item">
						<view class="feature-icon">
							<text class="icon-emoji">📊</text>
						</view>
						<text class="feature-title">实时数据</text>
						<text class="feature-desc">项目进度、质量指标实时监控</text>
					</view>
					
					<view class="feature-item">
						<view class="feature-icon">
							<text class="icon-emoji">📈</text>
						</view>
						<text class="feature-title">趋势分析</text>
						<text class="feature-desc">数据趋势分析与预测</text>
					</view>
					
					<view class="feature-item">
						<view class="feature-icon">
							<text class="icon-emoji">⚠️</text>
						</view>
						<text class="feature-title">预警系统</text>
						<text class="feature-desc">异常情况预警提醒</text>
					</view>
					
					<view class="feature-item">
						<view class="feature-icon">
							<text class="icon-emoji">📋</text>
						</view>
						<text class="feature-title">报表生成</text>
						<text class="feature-desc">自动生成监控报表</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { STORAGE_KEYS } from '@/constants/index.js'
	import { getStorage, showToast, showLoading, hideLoading } from '@/utils/index.js'

	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		
		onShow() {
			this.checkPermission()
		},
		
		methods: {
			/**
			 * 检查权限并显示提示
			 */
			checkPermission() {
				const userInfo = getStorage(STORAGE_KEYS.USER_INFO)
				if (userInfo) {
					this.userInfo = userInfo
				}
				
				// 显示权限限制提示
				showLoading('检查权限中...')
				
				setTimeout(() => {
					hideLoading()
					showToast('无权限访问监控功能')
				}, 500)
			},
			
			/**
			 * 返回首页
			 */
			goBack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.monitor-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: $bg-secondary;
}

/* 顶部导航栏 */
.nav-header {
	background: $primary-gradient;
	padding: $spacing-lg;
	padding-top: calc(var(--status-bar-height, 0) + #{$spacing-lg});
	border-radius: 0 0 $border-radius-xl $border-radius-xl;
	box-shadow: $shadow-base;
}

.nav-content {
	display: flex;
	justify-content: center;
	align-items: center;
}

.page-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: $spacing-xs;
}

.title-text {
	font-size: $font-size-xl;
	font-weight: 600;
	color: $text-white;
}

.subtitle-text {
	font-size: $font-size-sm;
	color: rgba(255, 255, 255, 0.8);
}

/* 内容容器 */
.content-container {
	flex: 1;
	padding: $spacing-xl;
	display: flex;
	flex-direction: column;
	gap: $spacing-xl;
}

/* 权限提示 */
.permission-notice {
	background: $white;
	border-radius: $border-radius-lg;
	padding: $spacing-xxl;
	text-align: center;
	box-shadow: $shadow-sm;
}

.notice-icon {
	margin-bottom: $spacing-lg;
}

.icon-large {
	font-size: 120rpx;
	opacity: 0.6;
}

.notice-title {
	font-size: $font-size-xl;
	font-weight: 600;
	color: $text-primary;
	margin-bottom: $spacing-md;
	display: block;
}

.notice-desc {
	font-size: $font-size-base;
	color: $text-secondary;
	margin-bottom: $spacing-sm;
	display: block;
	line-height: 1.5;
}

.notice-detail {
	font-size: $font-size-sm;
	color: $text-muted;
	display: block;
	line-height: 1.4;
}

.notice-actions {
	margin-top: $spacing-xl;
	display: flex;
	justify-content: center;
}

.action-btn {
	padding: $spacing-md $spacing-xl;
	border-radius: $border-radius-base;
	transition: $transition-base;

	&.primary-btn {
		background: $primary-color;

		&:active {
			background: $primary-dark;
			transform: scale(0.98);
		}
	}
}

.btn-text {
	font-size: $font-size-base;
	font-weight: 500;
	color: $text-white;
	text-align: center;
}

/* 功能预览 */
.feature-preview {
	background: $white;
	border-radius: $border-radius-lg;
	padding: $spacing-xl;
	box-shadow: $shadow-sm;
}

.preview-title {
	margin-bottom: $spacing-lg;
	text-align: center;
	padding-bottom: $spacing-md;
	border-bottom: 1rpx solid $border-light;
}

.feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: $spacing-lg;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: $spacing-lg;
	background: $gray-50;
	border-radius: $border-radius-base;
	transition: $transition-base;

	&:active {
		background: $gray-100;
		transform: scale(0.98);
	}
}

.feature-icon {
	margin-bottom: $spacing-md;
}

.icon-emoji {
	font-size: 60rpx;
}

.feature-title {
	font-size: $font-size-base;
	font-weight: 600;
	color: $text-primary;
	margin-bottom: $spacing-xs;
}

.feature-desc {
	font-size: $font-size-sm;
	color: $text-secondary;
	line-height: 1.4;
}
</style>
